﻿@model List<JewererBasic.ORDER_TREE>
<h2>Tree Order</h2>

<fieldset>
    <a href="/Component/Index">
        <input type="button" value="BACK" />
    </a>

    <a href="/TreeOrder/CreateOrder">
        <input type="button" value="CREATE TREE ORDER" />
    </a>
    <p></p>
    @*<strong class="myStrong" style="font-size: 20px">List Tree Orders</strong>*@
    <fieldset>
        <legend>LIST TREE ORDERs</legend>
    <table>
        <tr>
            <td>
                <table class="table head tableContent">
                    <tr>
                        <th style="width: 100px;">Order Id</th>
                        <th style="width: 200px;">MC</th>
                        <th style="width: 200px;">Date Make</th>
                        <th style="width: 200px;">Status</th>
                        <th style="width: 150px;">Actions</th>
                    </tr>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td style="text-align: center">
                                @Html.DisplayFor(modelItem => item.Order_Tree_Id)
                            </td>
                            <td style="text-align: center">
                                @Html.DisplayFor(modelItem => item.MC)
                            </td>
                            <td style="text-align: center">
                                @Html.DisplayFor(modelItem => item.DateMake)
                            </td>
                            <td style="text-align: center">
                                <!--Incomplete-->
                            </td>
                            <td style="text-align: center">
                                @Html.ActionLink("Detail", "Detail", new { id = item.Order_Tree_Id })
                            </td>
                        </tr>
                    }
                </table>
            </td>
        </tr>
    </table>
        </fieldset>
</fieldset>

@section Scripts {
    <script type="text/javascript">
        $(function () {
            var numberRowsEachPage = 10;

            $(".tableContent").each(function (i, e) { // loop through all tables in the document
                var count = 0;
                $(this).find("tr").each(function (i, e) { // loop through all row in each table
                    // skip first element (table heading)
                    if (i != 0) {
                        // show only elements if it's the first page, hide if else.
                        if (i <= numberRowsEachPage) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }

                        count++;
                    }
                });

                var pagesQty = (count - 1) / numberRowsEachPage + 1; // the number of pages in the table
                var text = '<tr><td colspan="100%">';
                for (var i = 1; i <= pagesQty; i++) {
                    //text += i + " ";
                    text += '<a href="#" class="breakingNumber">' + i + '</a> ';
                }
                text += '</td></tr>';
                $(this).append(text);
            });

            $(document).on("click", ".breakingNumber", function () {
                var value = parseInt($(this).text()); // value of breaking number
                var from = (value - 1) * numberRowsEachPage + 1;
                var to = value * numberRowsEachPage;
                $(this).parent().parent().parent().children("tr").each(function (i, e) {
                    if (i != 0) { // first element is heading
                        if (from <= i && i <= to) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                });
                $(this).parent().parent().parent().children("tr").last().show(); // show row of breaking numbers

                // restore all element that it dont have any href attribute.
                $(this).parent().parent().parent().children("tr").last().find("a").each(function () { // element of breaking number
                    var attr = $(this).attr('href');

                    // For some browsers, `attr` is undefined; for others,
                    // `attr` is false.  Check for both.
                    if (typeof attr === typeof undefined || attr === false) {
                        $(this).attr('href', '#');
                        $(this).css("color", "#256c89");
                    }
                });
                // remove href attribute for current element
                $(this).removeAttr('href');
                $(this).css('color', 'black');
            });
        });
    </script>
}

